<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="box">
			<div class="link link-miss">
				<span class="icon"></span>
				<a href="#"class="button"data-title="测试1测试1测试1">
					<span class="line line-top"></span>
					<span class="line line-left"></span>
					<span class="line line-right"></span>
					<span class="line line-bottom"></span>
					test
				</a>
			</div>
			<div class="link link-play">
				<span class="icon"></span>
				<a href="#"class="button"data-title="测试2测试2测试2测试2测试2测试2测试2">
					<span class="line line-top"></span>
					<span class="line line-left"></span>
					<span class="line line-right"></span>
					<span class="line line-bottom"></span>
					test
				</a>
			</div>
			<div class="link link-touch">
				<span class="icon"></span>
				<a href="#"class="button"data-title="测试3测试3测试3测试3">
					<span class="line line-top"></span>
					<span class="line line-left"></span>
					<span class="line line-right"></span>
					<span class="line line-bottom"></span>
					test
				</a>
			</div>
			<div class="tip">
				<em></em>
				<span></span>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".link .button").hover(function(){
					var title=$(this).attr("data-title");
					$(".tip em").text(title);
					var pos=$(this).offset().left;
					var dis=($(".tip").outerWidth()-$(this).outerWidth())/2;
					var f=pos-dis;
					$(".tip").css({"left":f+"px","opacity":1}).animate({"top":195,"opacity":1},300)
				},function(){
					$(".tip").animate({"top":160,"opacity":0,},300)
				})
			})
		</script>
	</body>
</html>
